Common Shiny Question

How do I customize my app so the fonts and colors match my university’s?

UVA Branding

https://brand.virginia.edu/

Modifying CSS

Syntatically Awesome Style Sheets

CSS with Superpowers


Sass allows you to change colors and fonts using variables

Customize Bootstrap with Sass

Need to install 2 packages (requires shiny>=1.6)

  1. sass: compile sass to css in R

  2. bslib: customize Bootstrap in R

https://rstudio.github.io/bslib/

Unfortunately doesn’t work with Shiny Dashboards – use fresh instead!

https://dreamrs.github.io/fresh/articles/vars-shinydashboard.html

Start with regular Shiny code

  1. Load bslib
  2. Instantiate a bs_theme object
  3. Set theme to your bs_theme object in the UI
library(shiny)
library(bslib) # step 1

my_theme <- bs_theme() # step 2

ui <- fluidPage(
  theme = my_theme, # step 3
  ...
)

Preview your app

  1. Add bs_themer() to your server function
library(shiny)
library(bslib) # step 1

...

server <- function(input, output){
   bs_themer()
   
   ##cool reactive logic##
}

Adjust colors and fonts

Copy updates to app.R

When you make changes in the Preview tool, code for updating your theme is printed to the console. Copy the updates to your Shiny app.

my_theme <- bs_theme()

# This line is copied from the console (may need to update theme name)             
my_theme <- bs_theme_update(my_theme, bg = "#4B3E23", fg = "#000000")

How do I find out Bootstrap variable names?

Theming Plots

The thematic package enables automatic theming of plots

library(thematic)

thematic_on()
onStop(thematic_off)

Great for Dark Mode!